<template>
    <div class="hello" style="padding:50px">
        <!-- <el-date-picker size='small' v-model="selectDate" type="month"
      placeholder="选择月" value-format="yyyy-MM">
    </el-date-picker>
        <el-button size='small' @click='changeDate'>确定</el-button>-->
        <div class="from">
            <el-form :model="form" ref="form" label-width="80px" :inline="!false" size="small">
                <el-form-item>
                    <el-date-picker
                        v-model="selectDate"
                        value-format="yyyy-MM-dd"
                        type="date"
                        placeholder="选择日期"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="changeDate">搜索</el-button>
                    <el-button type="primary" @click="isAdd = true">创建</el-button>
                    <el-button type="primary">导出</el-button>
                </el-form-item>
            </el-form>
        </div>
        <full-calendar
            :config="config"
            :events="events"
            ref="calendar"
            @event-selected="eventClick"
            @day-click="dayClick"
        ></full-calendar>
        <add-schedule
            v-if="isAdd"
            :isAdd="isAdd"
            :editItem="editItem"
            @add="addItem"
            @close="isAdd = false"
        ></add-schedule>
    </div>
</template>
<script>
import { FullCalendar } from 'vue-full-calendar'
import 'fullcalendar/dist/fullcalendar.css'
import addSchedule from './add.vue'
export default {
    data() {
        return {
            isAdd: false,
            selectDate: '',//日期选择器选中的月份
            config: {
                firstDay: '0',//以周日为每周的第一天
                weekends: true,//是否在日历中显示周末
                locale: 'zh-cn',//语言
                defaultView: 'month',//默认按月显示
                height: 'auto',//高度
                fixedWeekCount: false,//是否固定显示六周
                // weekMode:"liquid",//周数不定，每周的高度可变，整个日历高度不变
                allDaySlot: false,
                // allDay:true,
                header: {//表头信息
                    left: 'prev, next, today',
                    center: 'hide',
                    right: 'title'
                },
                buttonText: {
                    today: '今天',
                },
                customButtons: {

                }
            },
            events: [],
            newItem: {},
            editItem: {},
            value: "",
            form: {

            }
        }
    },
    components: { FullCalendar, addSchedule },
    methods: {
        changeDate() {
            this.$nextTick(() => {
                this.$refs.calendar.fireMethod('gotoDate', this.selectDate)
                // console.log(this.$refs.calendar.fireMethod)
                // this.$refs.calendar.fireMethod('prev');
            })

        },
        eventClick(event) { //events的点击事件
            // console.log(event)
            // this.editItem = event
            // this.isAdd = true
        },
        dayClick(date, jsEvent, view) { //日期的点击事件
            // console.log(date, jsEvent, view)
            // this.editItem = {}
            // this.isAdd = true
        },
        addItem(detail) {
            console.log(detail)
            this.newItem = JSON.parse(detail)
            if (this.editItem.id) {//如果是编辑，就删掉该条
                this.events.forEach((el, ind) => {
                    if (el.id == this.editItem.id) {
                        this.events.splice(ind, 1)
                    }
                })
            }
            this.events.push({
                id: this.editItem.id ? this.editItem.id : this.setUuid(),
                title: this.newItem.title,
                start: this.newItem.period[0],
                end: this.newItem.period[1],
                display: "background",
                extendedProps: {
                    department: 'BioChemistry'
                },
                description: 'Lecture'
            })
            console.log(this.events)


        },
        setUuid() {
            var s = [];
            var hexDigits = "0123456789abcdef";
            for (var i = 0; i < 36; i++) { s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1); }
            s[14] = "4";
            s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
            s[8] = s[13] = s[18] = s[23];
            var uuid = s.join("");
            return uuid;
        },

    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
    width: 55%;
    margin: 0 auto;
    background: #fff;
    position: relative;
}
.from {
    position: absolute;
    left: 30%;
}
</style>